<template>
<el-dialog title="资源详情" :visible.sync="value" :destroy-on-close="true"  :before-close="hideForm"  width="650px" top="5vh" :close-on-click-modal="false">	
 <el-form  ref="editForm" :model="editForm" :rules="upLoadRules">
    <el-form-item label="资源名称" label-width="100px" class="query-form-item">
      <el-input v-model="editForm.resName" placeholder="请输入课件名称" style=" width:250px;"></el-input>
    </el-form-item>
    <template v-if="editForm.resType < 3">
      <el-form-item label="资源文件"  label-width="100px" class="query-form-item">
        <SingleUpload  
        :ext="typeName[editForm.resType]" 
        :type="uploadType[editForm.resType]" 
        :size="sizeName[editForm.resType]" 
        :imageUrl="editForm.resUrl | setResUrl(editForm.resType)" 
        @on-select="onSelect"></SingleUpload>
        <div class="el-upload__tip">只能上传<span>{{typeName[editForm.resType]}}</span>文件，且不超过<span>{{sizeName[editForm.resType]}}M</span></div>
      </el-form-item>    
      <el-form-item label="跳转地址"  label-width="110px" prop="actionUrl" class="query-form-item">
        <el-input  placeholder="请输入跳转地址" style="width:90%;" v-model="editForm.actionUrl"></el-input>
      </el-form-item>      
      <el-form-item label="资源文本"  label-width="110px" prop="resContent" class="query-form-item">
        <el-input type="textarea" :rows="4" placeholder="请输入文本内容，可适当加HTML标签" style="width:90%;" v-model="editForm.resContent"></el-input>
      </el-form-item>    	
    </template>
    <template v-if="editForm.resType == 9">
      <el-form-item label="资源文本" label-width="100px" class="query-form-item"> 
        <div style="height:270px;">
        	<Tinymce ref="editorText" menubar="false" :toolbar="['undo redo bold italic underline  outdent   anchor insertdatetime table preview code']"  v-model="editForm.resContent" :width="500" :height="200"/> 
      	</div>
      </el-form-item>
    </template>
    <template v-if="editForm.resType == 3">
      <el-form-item label="文字链接" label-width="100px" class="query-form-item"> 
       	 <el-input v-model="addResText.text" class="add-inpt add-inpt-01" placeholder="请输入文字内容"></el-input>
         <el-input v-model="addResText.link" class="add-inpt add-inpt-02" style=" width:250px;" placeholder="请输入文字链接"></el-input>
         <el-button type="primary" icon="el-icon-edit" @click="addResTextLink">添加</el-button>
      	 
         <el-table class="add-table" :data="editForm.resText" :border="editForm.resText.length > 0" max-height="300" :show-header="false" style=" width:479px;">
            <el-table-column align="left" width="140"  prop="text" show-overflow-tooltip></el-table-column>         			
         		<el-table-column align="left" show-overflow-tooltip>
              <template v-if="scope.row.link" slot-scope="scope">
                <el-input v-if="editTextNum === scope.$index" size="mini" v-model="scope.row.link"></el-input>
                <span v-else>{{scope.row.link | setHtmlToText}}</span>
              </template>
            </el-table-column> 
         		<el-table-column align="center" width="88">
            	<template slot-scope="scope">
              	<el-button-group>
                	<el-button size="mini" @click="editResText(scope.$index)" :type="editTextNum === scope.$index ? 'warning' : 'primary'" circle icon="el-icon-edit"></el-button>
            			<el-button size="mini" @click="delResText(scope.$index)" type="danger" circle icon="el-icon-delete"></el-button>
            		</el-button-group>
              </template>
            </el-table-column>
         </el-table>
      </el-form-item>
    </template>
    <div class="dialog-footer" style="text-align:right">
      <el-button @click.native="hideForm">取消</el-button>
      <el-button type="primary" :loading="formLoading" @click.native="editFormSubmit()">提交</el-button>
    </div>             		
 </el-form>
</el-dialog>
</template>

<script>
import config from '@/api/bgapi';
import request from '@/utils/request';
import Tinymce from '@/components/Tinymce';
import SingleUpload from "@/components/Upload/SingleUpload";
export default {
	components: {Tinymce,SingleUpload},
	props: ['value','editForm'],		
  data() {
    return {
      upLoadRules:{
        resName: [{ required: true, message: "请输入资源名称", trigger: "blur"}],
        //resUrl: [{ required: true }]        
      },
      uploadType:['image','video','audio'],
      typeName:['jpg/png/gif/jpeg','mp4','mp3/wma'],
      sizeName:[5,20,20],			
			addResText:{text:'',link:''},
			formLoading:false,
			imageUrl:'',
			editTextNum:'',	
		}
  },	
  mounted() {},
  methods: {
		onSelect(data){
			this.editForm.resUrl = data.resUrl;
			this.editForm.resSize = data.resSize;
			this.imageUrl = data.imgUrl;			
		},
		hideForm(){
			this.$emit('input', false);	
			this.resetForm();
		},
		addResTextLink(){
			if(this.addResText.text == ''){return}
			var obj = {}
			if(this.addResText.text){obj.text = this.addResText.text}
			if(this.addResText.link){obj.link = this.addResText.link}
			this.editForm.resText.push(obj);
			this.addResText = {text:'',link:''};	
		},
		delResText(index){
			this.editForm.resText.splice(index, 1);
			this.editTextNum = '';
		},
		async editResText(index){
			if(this.editTextNum === index){
				var _param = { resName:this.editForm.resName };
				_param.resText = this.editForm.resText;
				var res = await request.put(config.resources+'/'+this.editForm.id,_param)
				this.editTextNum = '';
			}else{
				this.editTextNum = index;					
			}
		},		
		async editFormSubmit(){
			this.formLoading = true;
			var _param = {resName:this.editForm.resName};
			if(this.editForm.resContent){_param.resContent = this.editForm.resContent;_param.resSize = _param.resContent.length;}
			if(this.editForm.resText){_param.resText = this.editForm.resText; _param.resSize = _param.resText.length;}
			if(this.editForm.resUrl){_param.resUrl = this.editForm.resUrl;_param.resSize = this.editForm.resSize}
			if(this.editForm.actionUrl){_param.actionUrl = this.editForm.actionUrl}
			var res = await request.put(config.resources+'/'+this.editForm.id,_param)
 			this.formLoading = false;
			this.resetForm();
			this.$emit('editSuccess');	
		},
		openedAfter(){
			if(this.editForm.resType == 9){
				this.$nextTick(() =>{
					this.$refs.editorText.setContent(this.editForm.resContent)
				})
			}
		},
    resetForm() {
      if (this.$refs["editForm"]) {
        // 清空验证信息表单
        this.$refs["editForm"].clearValidate();
        // 刷新表单
        this.$refs["editForm"].resetFields();				
      }
    },				
					
	},
  filters: {
		setHtmlToText(val){
			var re = /<[^>]+>/gi;
			val = val.replace(re, '');
			return val;			
		},
		setResUrl(img,type){
			if(type == '0'){
				return process.env.VUE_APP_BASE_API+img;	
			}else if(type == '1'){
				return require('@/assets/images/video.png');	
			}else if(type == '2'){
				return require('@/assets/images/audio.png');	
			}else if(type == '3'){
				return require('@/assets/images/text.png');
			}else if(type == '10'){
				return require('@/assets/images/group.png');
			}
		}
  },
};
</script>

<style scoped>
.img-view >>> .el-icon-circle-close {color: #5F6266; background: #fff; border-radius: 50%;}
.view-img{ vertical-align:middle; cursor:pointer; margin-left:10px;}
.view-img >>> .avatar-uploader{height:40px; margin:0; line-height:0; width:auto; max-width:80px; }
.view-img >>> .avatar-uploader .el-upload{border:1px solid #FAFAFA;border-radius:0;cursor: pointer;position: relative;overflow: hidden;}
.view-img >>> .avatar{ height:38px; max-width:78px;}
.view-img >>> .avatar-uploader .el-upload-dragger{ height:38px; max-width:78px; border:none;border-radius: 6px; display:flex;justify-content:center; align-items:center;}
.view-img-x{ vertical-align:middle; line-height:0;border:0px solid #FAFAFA;  height:40px; margin:0 0 0 10px; line-height:0; width:auto; max-width:80px;}
.view-img-x >>> img{ height:40px; width:auto; max-width:78px;vertical-align:middle; }
.el-upload__tip{ height:20px; line-height:20px;}
.add-inpt{ width:140px;}
.add-inpt >>> .el-input__inner{ padding:0 8px; border-radius:0;}
.add-inpt-01 >>> .el-input__inner{ border-right:0; } 
.add-inpt-02 >>> .el-input__inner{ border-right:0; } 
.add-table{ margin-top:10px;}
.add-table >>> .el-table__row td{ padding:5px 0;}
.add-table >>> .el-table__empty-block{ display:none;}
</style>
